<template>
  <div class="page">
    <div class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>责任单位进度填报</span>
          <span @click="goBack">返回</span>
        </div>
          <el-table
            border
            :data="tableData"
            style="width: 100%"
            height="700px"
            size="small"
          >
            <el-table-column align="center" width="80" prop="departmentTypeName" label="单位类别"></el-table-column>
            <el-table-column align="center" width="240" prop="name" label="单位名称"></el-table-column>
            <el-table-column align="center" label="一季度">
              <el-table-column align="center" width="60" prop="one" label="进度"></el-table-column>
              <el-table-column align="center" width="60" prop="one1" label="排名"></el-table-column>
              <el-table-column align="center" prop="one2" label="描述"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="二季度">
              <el-table-column align="center" width="60" prop="two" label="进度"></el-table-column>
              <el-table-column align="center" width="60" prop="two1" label="排名"></el-table-column>
              <el-table-column align="center" prop="two2" label="描述"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="三季度">
              <el-table-column align="center" width="60" prop="three" label="进度"></el-table-column>
              <el-table-column align="center" width="60" prop="three1" label="排名"></el-table-column>
              <el-table-column align="center" prop="three2" label="描述"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="第四季度">
              <el-table-column align="center" width="60" prop="four" label="进度"></el-table-column>
              <el-table-column align="center" width="60" prop="four1" label="排名"></el-table-column>
              <el-table-column align="center" prop="four2" label="描述"></el-table-column>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="dataGrade(scope.row)">进度</el-button>
                <el-button type="success" size="mini" @click="handEdit(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="dataTotal"
              :page-size="pageSize"
              :current-page="pageNum"
              :total="total"
            ></el-pagination>
      </el-card>
    </div>
    <!-- 弹出框打分 -->
    <el-dialog title="提示" :visible.sync="dialogGrade" width="30%">
      <el-form label-width="95px" :model="objCurr" :hide-required-asterisk="false">
        <el-form-item label="打分类型：" prop="type">
          <el-switch
          active-color="#13ce66"
          inactive-color="#ff4949"
          v-model="objCurr.type"
          active-text="季度打分"
          inactive-text="月度打分"
          disabled
        ></el-switch>
        </el-form-item>
        <el-form-item label="年份：" prop="year">
          <el-date-picker
              v-model="objCurr.year"
              type="year"
              size="small"
              placeholder="选择年"
              style="width:134px"
              value-format="yyyy"
            ></el-date-picker>
            <span style="width:120px;" class="striping">
            <i>-</i>
            <b
              style="color:#303133;font-weight: 500;fong-size:12px;"
              v-text="objCurr.type ? '季度' : '月份'"
            ></b>
            <el-select v-model="objCurr.time" size="small" placeholder="请选择" style="width:100px;">
              <el-option
                v-for="(item,index) in quarterList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item label="进度：" prop="score">
          <el-input size="medium" placeholder="请输入进度" v-model="objCurr.score" style="width:58%;"></el-input>
        </el-form-item>
        <el-form-item label="排名：" prop="ranking">
          <el-input size="medium" placeholder="请输入排名" v-model="objCurr.ranking" style="width:58%;"></el-input>
        </el-form-item>
        <el-form-item label="排名描述：" prop="rankingDesc">
          <el-input type="textarea" size="medium" placeholder="请输入排名描述" v-model="objCurr.rankingDesc" style="width:58%;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogGrade = false">取 消</el-button>
          <el-button type="primary" @click="addGrade()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      dialogGrade: false,
      value: "",
      input: "",
      tableData: [],
      total: 0,
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      objCurr: {
        type: true,
        departmentId: "",
        taskId: "",
        year: "",
        time: "",
        score: ""
      },
      quarterList:[
        {id:1,name:"第一季度"},
        {id:2,name:"第二季度"},
        {id:3,name:"第三季度"},
        {id:4,name:"第四季度"}
      ],
    };
  },
  mounted() {
    this.getListByPage();
  },
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    dataTotal(val) {
      this.pageNum = val;
      this.getListByPage();
    },
    // 获取数据列表
    getListByPage() {
      this.$axios
        .post(`/dept/getListByPage/${this.pageNum}/${this.pageSize}`)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    dataGrade(val) {
      console.log(val);
      for (const key in this.objCurr) {
        this.objCurr[key] = "";
      }
      this.objCurr.departmentId = val.id;
      this.objCurr.type = true;
      this.dialogGrade = true;
    },
    // 弹框新增
    addGrade() {
      let _this = this.objCurr;
      if (_this.year == "" || _this.time == "" || _this.score == "") {
        this.$message.error("请用户填填完输入框");
        return;
      }
      if (!/(^[1-9]\d*$)/.test(_this.score)) {
        this.$message.error("请用户在分数内写入1-100的正整数");
        return;
      }

      if (this.objCurr.type) {
        this.objCurr.type = 1;
      } else {
        this.objCurr.type = 0;
      }
      this.$axios
        .post(`/deptScore/add`, this.objCurr, 2)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.$message({
              message: "数据更新成功",
              type: "success"
            });
            this.dialogGrade = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handEdit(row){
      this.dialogGrade=true;
    }
  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
}
.subnav {
  float: left;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 20%;
}
.searchLeft {
  float: left;
  width: 400px;
  /* height: 40px; */
}
.searchLeft > button {
  width: 100px;
  height: 40px;
  background: #409eff;
  color: #fff;
  border: 0px;
  font-size: 16px;
  text-align: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  position: relative;
  left: -8px;
  top: 1px;
}
.searchRight {
  float: left;
  width: auto;
}
.searchRight > span {
  display: inline-block;
  width: 80px;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-left: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.clearfix{
  display:flex;
  justify-content: space-between;
  cursor: pointer;
}
</style>
<style>
.el-scrollbar__wrap {
  overflow: visible;
  overflow-y: scroll;
}
</style>
